<template>
  <div class="notice-obj">
    <div class="top-tip">当告警生成时</div>
    <el-form label-position="top">
      <el-form-item label="通知对象" required>
        <div class="user-wrap">
          <div class="utop-op">
            <el-button type="primary" size="small">添加通知对象</el-button>
          </div>
          <BsTable ref="tableRef" :columns="columns" :data="tableData" :show-page="false" />
        </div>
      </el-form-item>
      <el-form-item label="告警恢复后是否发送恢复通知">
        <el-radio-group v-model="formData.a">
          <el-radio value="1">发送恢复通知</el-radio>
          <el-radio value="2">不发送恢复通知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="通知模板">
        <div class="from-item-content">
          <el-tabs>
            <el-tab-pane name="mail" label="邮件">
              <MsgModel has-title/>
            </el-tab-pane>
            <el-tab-pane name="email" label="短信">
              <MsgModel />
            </el-tab-pane>
            <el-tab-pane name="phone" label="电话">
              <MsgModel />
            </el-tab-pane>
            <el-tab-pane name="app" label="钉钉/飞书/企微">
              <MsgModel />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
      <el-form-item label="通知时间段" required>
        <div class="from-item-content">
          <div class="input-wrap">
            <div class="time">
              <el-time-picker
                is-range
                v-model="formData.aa"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </div>
          </div>
          <div class="tip">在此时间段时，才发生告警通知。通知时间支持24小时内，可跨天，例如23:00至第二天01:00</div>
        </div>
      </el-form-item>
      <el-form-item label="工单系统">
        <div class="input-wrap">
          <bs-select class="norm" v-model="formData.bb"></bs-select>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import BsTable from '@/components/table/BsTable.vue'
import MsgModel from './MsgModel.vue'
import {ref} from 'vue'

const tableRef = ref()
const formData = ref<Record<string, any>>({})
const tableData = ref<any[]>([{}])
const columns:ColumnItem[] = [
  {
    label: '联系人类别',
    prop: 'f',
    bodyOptions: {
      type: 'select',
      bind: (_row, _index) => {
        return {}
      }
    }
  },
  {
    label: '联系人',
    prop: 'f',
    bodyOptions: {
      type: 'select',
      bind: (_row, _index) => {
        return {}
      }
    }
  },
  {
    label: '通知方式',
    prop: 'f',
    bodyOptions: {
      type: 'select',
      bind: (_row, _index) => {
        return {}
      }
    }
  },
  {
    label: '操作',
    prop: 'action',
    width: 80,
    bodyOptions: {
      type: 'button',
      bind: (_row, _index) => {
        return {
          buttons: [{
            text: '删除',
            onclick: () => {
            }
          }]
        }
      }
    }
  }
]


</script>
<style lang="scss" scoped>
.user-wrap {
  width: 100%;
  .utop-op {
    margin-bottom: 8px;
  }
}
.top-tip {
  margin-bottom: 16px;
}
.from-item-content {
  width: 100%;
}
.input-wrap {
  display: flex;
  .time {
    width: 300px;
  }
  .norm {
    width: 400px;
  }
}
.tip {
  font-size: 12px;
  color: var(--gray-color);
}
</style>
